子夜安然

主题

Eleven2026-03-30
796
3.1m

Vuex 与 Pinia 状态管理深入对比 ​

一、核心要点速览 ​

💡 核心考点

  • Vuex: Vue 2/3 的传统状态管理方案，基于单一状态树，严格遵循单向数据流。
  • Pinia: Vue 3 官方推荐的新状态管理方案，更简洁的 API，天然支持 TypeScript。
  • 关键差异: Pinia 去掉了 Mutation，API 设计更符合 Composition API 习惯。
  • 趋势: Vue 3 项目优先选择 Pinia。

二、工作流程对比 ​

1. Vuex 的工作流程 (严格模式) ​

Vuex 遵循一个严谨的循环流程，通过 Mutations 强制保证状态的同步更新，以便于 Devtools 追踪。

Vuex 工作流

  • State: 单一状态树，存储所有数据源。
  • Getter: 类似计算属性，对 State 进行加工处理。
  • Mutation: 唯一修改 State 的同步方法，由 Commit 触发。
  • Action: 处理异步操作或复杂的业务逻辑，通过 Dispatch 触发，最终 Commit 到 Mutation。

2. Pinia 的工作流程 (极简模式) ​

Pinia 极大地简化了流程，去掉了 Mutation，使得代码更加直观。

Pinia 工作流

  • State: 定义初始数据。
  • Getter: 与 Vuex 类似，对 State 进行派生。
  • Action: 核心职责，支持同步和异步，直接修改 State，由方法调用触发。

三、架构设计对比 ​

1. 嵌套树 vs 扁平化 ​

Vuex 是全局单例的树状结构，而 Pinia 采用了更加模块化的扁平化设计。

Vuex vs Pinia 架构对比

2. 核心特性差异汇总 ​

特性Vuex (v3/v4)Pinia
API 风格模块化 (Modules) + 字符串常量函数式定义 (DefineStore)
Mutation必须有 (区分同步/异步)已删除 (Action 处理一切)
TypeScript支持较弱，需手动声明类型原生支持，自动推导类型
体积约 2KB (gzipped)约 1KB (更轻量)
Vue 3 适配略显臃肿 (Composition API 体验差)完美适配 (天然契合 setup)
插件系统支持插件扩展扩展性极强 (支持 $subscribe 等)

四、为什么 Pinia 最终胜出？ ​

  1. 更符合直觉：在 Pinia 中，你就像在操作一个普通的 JavaScript 对象一样修改状态。
  2. 模块解耦：不再有复杂的嵌套命名空间 (namespaced: true)，每个 Store 都是一个独立的文件/模块。
  3. 类型安全：在 Vuex 中，commit('SET_COUNT', 1) 是字符串匹配，很容易写错；而在 Pinia 中，直接调用 counter.increment()，IDE 会提供完整的代码提示。
  4. 性能更优：由于去掉了冗余的 Mutation 转换，且支持更好的代码拆分（Code Splitting），整体运行时性能更佳。

五、代码实战对比 ​

1. Vuex 典型写法 ​

javascript
// store/index.js
export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++ }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => commit('increment'), 1000)
    }
  }
})

// 组件中使用
this.$store.dispatch('asyncIncrement')

2. Pinia 典型写法 ​

javascript
// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    async increment() {
      // 直接修改，支持异步
      await delay(1000)
      this.count++
    }
  }
})

// 组件中使用
const counter = useCounterStore()
counter.increment()

六、总结一句话 ​

  • Vuex: 严谨的循环、繁琐的流程、适合大型传统项目的“规范化”管理。
  • Pinia: 极简的逻辑、极致的 TS 体验、现代 Vue 3 项目的不二之选。 🚀
最近更新